<template>
  <div>
    <ul>
      <li @click="fn">这是第一个li</li>
      <li @click="fn1">这是第二个li</li>
      <li @click="fn2">这是第三个li</li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    fn () {
      // this.$router.push('/?id=1&name=伟超')
      this.$router.push({ name: 'Yi1', query: { id: 1, name: '伟超' } })
      // if (this.$router)
      // console.log(this.$router);
      // console.log(this);
    },
    fn1 () {
      this.$router.push({ name: 'Er1', query: { id: 1, name: '伟超' } })
      // this.$router.push('/Er?id=1&name=伟超')
    },
    fn2 () {
      // this.$router.push('/San/:id/:name')
    }
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  li {
    width: 150px;
    height: 150px;
    margin: 50px;
  }
}
</style>
